{% extends "layout/manage.html" %}
{% load static %}



{% block css %}
    <link rel="stylesheet" href="{% static 'plugin/editor.md/css/editormd.css' %}">
    <link rel="stylesheet" href="{% static 'plugin/bootstrap-datepicker/dist/css/bootstrap-datepicker.css' %}">
    <link rel="stylesheet" href="{% static 'plugin/bootstrap-select/dist/css/bootstrap-select.min.css' %}">

    <style>
        .comment-area .item {
            margin-top: 20px;
        }

        .comment-area .left-avatar {
            float: left;
            margin-right: 10px;
            display: inline-block;
            width: 30px;
            height: 30px;
            background-color: #304659;
            color: white;
            line-height: 30px;
            border-radius: 50%;
            text-align: center;
        }

        .comment-area .right-info {
            padding-left: 35px;
        }

        .comment-area .right-info .desc .msg {
            display: inline-block;
            padding-right: 20px;
            color: #8c8c8c;
        }

        .comment-area .child {
            padding-left: 55px;
        }

        .comment-area .error-msg {
            color: red;
        }

        .comment-area .reply-user {
            display: inline-block;
            background-color: #ddd;
            color: black;
            padding: 6px 8px;
            margin-left: 20px;
            border-radius: 8px;
            cursor: pointer;
        }


    </style>
{% endblock %}

{% block content %}
    <div class="container-fluid clearfix" style="padding:20px 0;">
        <div class="col-sm-7">
            <div class="panel panel-default">
                <div class="panel-heading">
                    <i class="fa fa-edit" aria-hidden="true"></i> 更新问题
                </div>
                <div class="panel-body">
                    <form id="editForm" class="form-horizontal" method="post">
                        {% csrf_token %}
                        <div class="form-group">
                            <label for="{{ form.issues_type.id_for_label }}"
                                   class="col-sm-2 control-label">{{ form.issues_type.label }}</label>
                            <div class="col-sm-10">
                                <div>
                                    {{ form.issues_type }}
                                </div>
                                <div class="error-msg">{{ form.issues_type.errors.0 }}</div>
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="{{ form.subject.id_for_label }}"
                                   class="col-sm-2 control-label">{{ form.subject.label }}</label>
                            <div class="col-sm-10">
                                <div>
                                    {{ form.subject }}
                                </div>
                                <div class="error-msg">{{ form.subject.errors.0 }}</div>
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="{{ form.module.id_for_label }}"
                                   class="col-sm-2 control-label">{{ form.module.label }}</label>
                            <div class="col-sm-10">
                                <div>
                                    {{ form.module }}
                                </div>
                                <div class="error-msg">{{ form.module.errors.0 }}</div>
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="{{ form.desc.id_for_label }}"
                                   class="col-sm-2 control-label">{{ form.desc.label }}</label>
                            <div class="col-sm-10">
                                <div id="editor">
                                    {{ form.desc }}
                                </div>
                                <div class="error-msg">{{ form.desc.errors.0 }}</div>
                            </div>
                        </div>
                        <div class="form-group clearfix">
                            <div class="col-md-6 pd-0">
                                <label for="{{ form.status.id_for_label }}"
                                       class="col-sm-4 control-label">{{ form.status.label }}</label>
                                <div class="col-sm-8 clearfix">
                                    <div>
                                        {{ form.status }}
                                    </div>
                                    <div class="error-msg">{{ form.status.errors.0 }}</div>
                                </div>
                            </div>
                            <div class="col-md-6 pd-0">
                                <label for="{{ form.priority.id_for_label }}"
                                       class="col-sm-4 control-label">{{ form.priority.label }}</label>
                                <div class="col-sm-8 clearfix">
                                    <div>
                                        {{ form.priority }}
                                    </div>
                                    <div class="error-msg">{{ form.priority.errors.0 }}</div>
                                </div>
                            </div>
                        </div>
                        <div class="form-group clearfix">
                            <div class="col-md-6 pd-0">
                                <label for="{{ form.assign.id_for_label }}"
                                       class="col-sm-4 control-label">{{ form.assign.label }}</label>
                                <div class="col-sm-8 clearfix">
                                    {{ form.assign }}
                                    <div class="error-msg">{{ form.assign.errors.0 }}</div>
                                </div>
                            </div>
                            <div class="col-md-6 pd-0">
                                <label for="{{ form.attention.id_for_label }}"
                                       class="col-sm-4 control-label">{{ form.attention.label }}</label>
                                <div class="col-sm-8 clearfix">
                                    {{ form.attention }}
                                    <div class="error-msg">{{ form.attention.errors.0 }}</div>
                                </div>
                            </div>
                        </div>
                        <div class="form-group clearfix">
                            <div class="col-md-6 pd-0">
                                <label for="{{ form.start_date.id_for_label }}"
                                       class="col-sm-4 control-label">{{ form.start_date.label }}</label>
                                <div class="col-sm-8 clearfix">
                                    <div id="id_start_date">
                                        {{ form.start_date }}
                                    </div>
                                    <div class="error-msg">{{ form.start_date.errors.0 }}</div>
                                </div>
                            </div>
                            <div class="col-md-6 pd-0">
                                <label for="{{ form.end_date.id_for_label }}"
                                       class="col-sm-4 control-label">{{ form.end_date.label }}</label>
                                <div class="col-sm-8 clearfix">
                                    <div id="id_end_date">
                                        {{ form.end_date }}
                                    </div>
                                    <div class="error-msg">{{ form.end_date.errors.0 }}</div>
                                </div>
                            </div>
                        </div>
                        <div class="form-group clearfix">
                            <div class="col-md-6 pd-0">
                                <label for="{{ form.mode.id_for_label }}"
                                       class="col-sm-4 control-label">{{ form.mode.label }}</label>
                                <div class="col-sm-8 clearfix">
                                    <div>
                                        {{ form.mode }}
                                    </div>
                                    <div class="error-msg">{{ form.mode.errors.0 }}</div>
                                </div>
                            </div>
                            <div class="col-md-6 pd-0">
                                <label for="{{ form.parent.id_for_label }}"
                                       class="col-sm-4 control-label">{{ form.parent.label }}</label>
                                <div class="col-sm-8 clearfix">
                                    <div>
                                        {{ form.parent }}
                                    </div>
                                    <div class="error-msg">{{ form.parent.errors.0 }}</div>
                                </div>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>

        <div class="col-sm-5">
            <div class="panel panel-default">
                <div class="panel-heading">
                    <i class="fa fa-search" aria-hidden="true"> </i> 操作记录
                </div>
                <div class="panel-body comment-area">
                    <div class="comment-list">

                    </div>
                    <hr/>
                    <div class="comment-text" id="commentText">
                        <div class="form-group">
                            <textarea id="content" rows="6" class="form-control" placeholder="请输入要回复的内容"></textarea>
                            <span class="error-msg"></span>
                        </div>
                        <input type="button" class="btn btn-primary" id="btnSubmit" value="提 交" >
                        <div class="reply-user hide" id="replyUser">
                            回复<span></span>
                            <i class="fa fa-times-circle" aria-hidden="true"></i>
                        </div>
                    </div>

                </div>

            </div>
        </div>

    </div>

    <div class="hide" id="recordTemplate">
        <div class="item clearfix">
            <div class="left-avatar"></div>
            <div class="right-info">
                <pre></pre>
                <div class="desc">
                    <div class="msg">
                        <i class="fa fa-bullhorn" aria-hidden="true"></i>
                        <span class="type"></span>
                    </div>
                    <div class="msg">
                        <i class="fa fa-user-o" aria-hidden="true"></i>
                        <span class="user"></span>
                    </div>
                    <div class="msg">
                        <i class="fa fa-clock-o" aria-hidden="true"></i>
                        <span class="date"></span>
                    </div>
                    <a href="#commentText" class="reply">
                        <i class="fa fa-commenting-o" aria-hidden="true"></i>回复
                    </a>
                </div>
            </div>
            <div class="child">

            </div>
        </div>
    </div>


{% endblock %}

{% block js %}
    <script src="{% static 'plugin/editor.md/editormd.js' %}"></script>
    <script src="{% static 'plugin/bootstrap-datepicker/dist/js/bootstrap-datepicker.js' %}"></script>
    <script src="{% static 'plugin/bootstrap-datepicker/dist/locales/bootstrap-datepicker.zh-CN.min.js' %}"></script>
    <script src="{% static 'plugin/bootstrap-select/dist/js/bootstrap-select.min.js' %}"></script>
    <script src="{% static 'plugin/bootstrap-select/js/i18n/defaults-zh_CN.js' %}"></script>
    <script>
        var WIKI_UPLOAD_URL = "{% url 'web:manage:wiki_upload'  project_id=request.tracer.project.id %}";
        var EDITOR;
        var ISSUES_CHANGE_API = "{% url 'web:manage:issues_change'  project_id=request.tracer.project.id issue_id=issue_object.id%}";
        $(function () {
            initMarkdown();
            initDatePicker();
            initIssuesRecord();
            bindReply();
            CancelBindReply();
            btnSubmit();
            bindIssuesChange();
        });

        /*
            初始化markdown编辑器
      */
        function initMarkdown() {
            EDITOR = editormd("editor", {
                placeholder: "请输入内容",
                height: 300,
                path: "{% static 'plugin/editor.md/lib/' %}",
                imageUpload: true,
                imageFormats: ["jpg", "jpeg", "gif", "png"],
                imageUploadURL: WIKI_UPLOAD_URL,
                onload: function () {
                    this.previewing();  // 默认打开预览模式
                },
                toolbarIcons: function () {
                    return ["bold", "hr", "del", "italic", "quote", "|", "image", "preview", "watch", "fullscreen", "||", "save"]
                },
                toolbarCustomIcons: {
                    save: "<input type='button' value='保存' class='btn btn-success btn-sm' onclick='saveDesc();' />"
                }
            })
        }

        /*
           初始化datepicker时间选择器
     */
        function initDatePicker() {
            $("#id_start_date input,#id_end_date input").datepicker({
                format: "yyyy-mm-dd",
                startDate: "0",
                language: "zh-CN",
                autoclose: true,

            });
        }

        /* 问题评论初始化*/
        function initIssuesRecord() {
            $.ajax({
                url: "{% url 'web:manage:issues_record' project_id=request.tracer.project.id issue_id=issue_object.id %}",
                method: "GET",
                dataType: "JSON",
                success: function (res) {
                    if (res.status) {
                        $.each(res.data, function (index, item) {
                            createRecordNode(item);
                        })
                    }
                }
            })
        }
        /* 添加评论节点*/
        function createRecordNode(nodeDict) {
            var $item = $("#recordTemplate").find(".item").clone();
            $item.find(".left-avatar").html(nodeDict.creator[0].toUpperCase());
            $item.find("pre").html(nodeDict.content);
            $item.find(".user").html(nodeDict.creator);
            $item.find(".type").html(nodeDict.reply_type);
            $item.find(".date").html(nodeDict.create_time);
            $item.attr({id: nodeDict.id, username: nodeDict.creator});
            if (nodeDict.parent_id) {
                // 有父id
                $('#' + nodeDict.parent_id).children(".child").append($item);
            } else {
                $(".comment-list").append($item);
            }
        }
        /* 回复问题*/
        function bindReply() {
            $(".comment-list").on('click', '.reply', function () {
                var $item = $(this).parent().parent().parent();
                var id = $item.attr("id");
                var username = $item.attr("username");
                $("#replyUser").removeClass("hide").attr("parent-id", id).children("span").text(username);
            })
        }
        /* 取消回复问题*/
        function CancelBindReply() {
            $("#replyUser").click(function () {
                $(this).addClass("hide").removeAttr("parent-id").children("span").text("");
            })
        }

        /*点击提交按钮进行回复，向后台发送ajax请求*/
        function btnSubmit() {
            $("#btnSubmit").click(function () {
                $("#content").next(".error-msg").empty();
                $.ajax({
                    url: "{% url 'web:manage:issues_record' project_id=request.tracer.project.id issue_id=issue_object.id %}",
                    type: "POST",
                    data:{content:$("#content").val(), reply:$("#replyUser").attr("parent-id")},
                    dataType: "JSON",
                    success:function (res) {
                        if (res.status){
                            // 创建回复
                            createRecordNode(res.data);
                            // 清空输入框
                            $("#content").val("");
                            // 把回复的按钮隐藏
                            $("#replyUser").addClass("hide").removeAttr("parent-id").children("span").text("");

                        }else{
                            $.each(res.error, function (index, value) {
                                 $("#content").next(".error-msg").text(value[0]);
                            })

                        }
                    }

                })
            })
        }

        /*问题更新，为每个输入框绑定一个change事件*/
        function bindIssuesChange() {
            // 每个input框都有一个form-control类，是通过后端ModelForm自动生成的
            $("#editForm").find(".form-control").change(function () {
                var postDict = {name:$(this).attr("name"), value:$(this).val()};
                console.log(postDict);
                postAjaxData(postDict);
            })
        }
        /*为markdown编辑器更新数据*/
        function saveDesc() {
            var postDict = {name: "desc", value: EDITOR.getValue()};
            console.log(postDict);
            postAjaxData(postDict);
        }
        /*向后台发送更新数据*/
        function postAjaxData(postDict) {
            $("#id_" + postDict.name).parent().next(".error-msg").text("");
            $.ajax({
                url: ISSUES_CHANGE_API,
                type:"POST",
                header:{
                    "Content-Type": "application/json;charset=utf-8"
                },
                data:JSON.stringify(postDict),
                dataType: "JSON",
                success:function (res) {
                   if(res.status){
                        createRecordNode(res.data);
                   }else{
                       $("#id_" + postDict.name).parent().next(".error-msg").text(res.data);
                   }
                }
            })
        }



    </script>
{% endblock %}


